<template>
	<view class="ImageView" v-if="ImageShow">
		<uni-transition @click="showclick" mode-class="fade" :styles="styles" :show="ImageShow">
			<div class="imageBox">
				<div class="top">

					<video id="myVideo" :src="ImageUrl" autoplay style="width: 80%;height: 80%;"></video>
				</div>
				<!-- <div class="bottom" v-if="textshow">
					描述
				</div> -->
			</div>
		</uni-transition>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				textshow: false,
				ImageShow: false,
				styles: {
					position: 'fixed',
					width: '100vw',
					height: '100vh',
					backgroundColor: 'rgba(0,0,0,0.8)',
					top: 0,
					left: 0,
					zIndex: 9999
				},
				ImageUrl: ''
			};
		},
		methods: {
			showclick() {
				this.ImageShow = false
			},
			open(url) {
				this.ImageShow = true
				this.ImageUrl = url
			}
		}
	}
</script>

<style lang="scss">
	.ImageView {
		width: 100%;
		height: 100%;
	}

	.imageBox {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		height: 100%;

		.top {
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
		}

		.bottom {
			box-sizing: border-box;
			height: 300rpx;
			padding: 20rpx;
			color: #fff;
		}
	}
</style>
